<template>
  <div id="app">
    <Header/>
    <router-view></router-view>
    <Footer v-if="FooterIsHidden"/>
  </div>
</template>

<script>
import Header from '@comp/Header'
import Footer from '@comp/Footer'

export default {
  name: 'App',
  components: {
    Header,
    Footer
  },
  // 书写一个计算属性，用来对底部的渲染与否进行判断
  computed:{
    FooterIsHidden(){
      //把在路由表处书写的meta数据中的固有信息取反后，返回给FooterIsHidden，通过v-if条件渲染来判断在该路由下是否渲染底部组件
      return !this.$route.meta.FooterIsHidden
    }
  }
}
</script>

<style>

</style>
